<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>数学测试v1.3</h1>
  </div>

  <div data-role="content">
	<label for="set_CountDown">要做几分钟:</label>
      <input type="range" name="set_CountDown" id="set_CountDown" value="2" min="1" max="60" step="1" data-highlight="true">
	<label for="select_questionSum">要做多少题:</label>
      <input type="range" name="select_questionSum" id="select_questionSum" value="20" min="10" max="100" step="10" data-highlight="true">
	<label for="select_maxNum">设置出题的最大数:</label>
      <input type="range" name="select_maxNum" id="select_maxNum" value="20" min="10" max="100" step="10" data-highlight="true">
	<label for="select_minNum">设置出题的最小数:</label>
      <input type="range" name="select_minNum" id="select_minNum" value="0" min="0" max="90" step="10" data-highlight="true">

	<p>+、-</p>
	<p>1次</p>
	<p>。。。</p>
	<button id="btn_begin" type="button" onclick="begin()">开始</button>
  </div>

  <div data-role="footer">
  <h1>一4班张长卿家@2021</h1>
  </div>
</div>

<div data-role="page" id="pagetwo" data-title="数学测试">
  <div data-role="header">
    <h1 id="questionNum">出题中。。。</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p id="math_question">出题中。。。</p>
    <button id="btn1" type="button" onclick="judgeTheAnswer(btn1)">出题中。。。</button>
    <button id="btn2" type="button" onclick="judgeTheAnswer(btn2)">出题中。。。</button>
    <button id="btn3" type="button" onclick="judgeTheAnswer(btn3)">出题中。。。</button>
    <button id="btn4" type="button" onclick="judgeTheAnswer(btn4)">出题中。。。</button>
  </div>
  <div data-role="footer">
    <h1 id="h_countDown">倒计时还没开始:</h1>
  </div>
</div> 

<script> 
	var questionSum = 0;
	//alert(questionSum);
	var questionNum = 1; //第几题
	var rightNum = 0; //做对了几题
	var maxNum = 0; //不能超过的最大的数
	var minNum = 0; //不能小于的数
	var interval_obj;//间隔函数返回值
	var CountDown_Num = 0;//倒计时
	var n1 = 0; //第一个操作数
	var o1 = "+"; //第一个操作符
	var n2 = 0;  //第2个操作数
	var answerNum = 0; //正确答案
	var optionNum = [0,0,0,0]; //四个选项
	var hasAnswerBoole = false; //选项里有正确答案了吗
	var btn1=document.getElementById("btn1");
	var btn2=document.getElementById("btn2");
	var btn3=document.getElementById("btn3");
	var btn4=document.getElementById("btn4");
	var wrongText = "\n\n你做错的题目是这些：\n";
	
	function begin(){
		questionSum = Number(document.getElementById("select_questionSum").value); //选择的题目总数
		maxNum = Number(document.getElementById("select_maxNum").value); //选择的最大不能超过的数
		minNum = Number(document.getElementById("select_minNum").value); //选择的最小不能超过的数
		questionNum = 1; 
		window.location.href = "#pagetwo";
		setQuestion();
		CountDown_Num=document.getElementById("set_CountDown").value*60;
		interval_obj = setInterval(function(){ showCountDown()}, 1000);
	}//开始做题
	
	function gameOver() {
		clearInterval(interval_obj);
		alert("\t测试结束\n\t你的成绩是:"+Math.floor(rightNum/questionSum*100)+"分"+wrongText);
		window.location.replace("#pageone");
	}
	
	function showCountDown() {
		document.getElementById("h_countDown").innerHTML = "倒计时：" + Math.trunc(CountDown_Num/60) + ":" + CountDown_Num % 60;
		CountDown_Num--;//倒计时减1
		if(CountDown_Num == 0) gameOver();
		//console.log(CountDown_Num);
	}//倒计时

	function getRndInteger(min, max) {
		return Math.floor(Math.random() * (max - min + 1) ) + min;
	}//得到一个min到max之间的随机数,包括min, max
	
	function judgeTheAnswer(btn){
		if(btn.innerHTML==answerNum){
			rightNum++;
			alert("\t\t✓\n\t👍👍😍😍");
		}
		else {
			alert("\t\t✕\n\t😲😲😭😭\n\t正确答案是"+answerNum); 
			wrongText = wrongText + document.getElementById("math_question").innerHTML + answerNum +"\n";
		} 
		questionNum++;
		if(questionNum>questionSum) gameOver();
		else setQuestion();
	}

	function setQuestion(){
		document.getElementById("questionNum").innerHTML="第"+questionNum+"题";
		hasAnswerBoole = false;
		n1 = getRndInteger(minNum, maxNum);
		
		if (getRndInteger(0, 1) == 1)
		{
			o1 = "-";
			//while(1)
			//{
				//n2 = getRndInteger(0, 10);
				//if ((n1-n2)>0) break;
			//}//计算结果不能是负数
			n2 = getRndInteger(minNum, n1);
			answerNum = n1-n2;
		}
		else
		{
			o1 = "+";
			n2 = getRndInteger(minNum, maxNum);
			answerNum = n1+n2;
		}
		for(var i=0;i<optionNum.length;i++){
			optionNum[i] = getRndInteger(0, maxNum*2);
			//console.log(optionNum[i]);
			if (optionNum[i] == answerNum){
				if (!hasAnswerBoole) hasAnswerBoole = true;//答案中有正确答案了
				else i = i-1;//有两个相同的正确答案，重新算，确保只有一个正确答案
				//console.log(hasAnswerBoole);
			}
		}
		if(!hasAnswerBoole){
			var j = getRndInteger(0, 3);
			optionNum[j] = answerNum;
		}//答案中没有正确答案，将答案随机放在一个选项
		//for(var i in optionNum){
			//console.log(optionNum[i]);
		//}
		//console.log(hasAnswerBoole);
		//console.log(answerNum);
		document.getElementById("math_question").innerHTML=String(n1)+o1+String(n2)+"=";
		btn1.innerHTML=optionNum[0];
		btn2.innerHTML=optionNum[1];
		btn3.innerHTML=optionNum[2];
		btn4.innerHTML=optionNum[3];
	}
</script>

</body>
</html>
